<template>
  <div class="BuMenRenYuanGuanLi">
    <el-row style="margin-top:8px; height:40px; line-height:40px">
      <el-col :span="24" style="width: 60%">
        <div class="el-icon-s-grid ln-daiban" style="float: left; line-height: 40px"><span>部门人员管理</span></div>
        <div style="float: right;">
          <el-button type="primary" round size="medium" @click="add_department=true" class="ln-yellow"><i
              class="el-icon-plus"></i><span>新增顶级部门</span></el-button>
          <!--<el-button type="warning" round size="medium" @click="loadData" class="ln-yellow"><i
            class="el-icon-refresh"></i><span>刷新</span></el-button>-->
        </div>
      </el-col>
    </el-row>
    <el-card shadow="never" style="width: 60%; margin-top: 10px">
      <div class="block">
        <el-tree
            :data="data"
            node-key="id"
            :props="{children:'items',label:'name'}"
            default-expand-all
            :expand-on-click-node="false"
            :draggable="true"
            @node-drop="movenode"
        >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ data.name }}</span>
        <span style="text-align: center">
          <el-button
              type="text"
              size="small"
              @click="child_add_department(data.pk)" style="margin: 0 10px">
            增加子部门
          </el-button>
          <el-button
              type="text"
              size="small"
              @click="update_department(data)" style="margin: 0 10px">
            编辑
          </el-button>
          <el-button
              type="text"
              size="small"
              @click="delete_department(data)" style="margin: 0 10px">
            删除
          </el-button>
          <el-button
              type="text"
              size="small"
              @click="view_department(data)" style="margin: 0 10px">
            查看
          </el-button>
          <el-button
              type="text"
              size="small"
              @click="user_list(data)" style="margin: 0 10px">
            人员
          </el-button>
        </span>
      </span>
        </el-tree>
      </div>
    </el-card>
    <!--新增部门-->
    <el-dialog title="新增部门" :visible.sync="add_department" width="30%">
      <el-form :model="department_form" :rules="rules" ref="createForm" label-width="100px">
        <el-form-item label="部门名称：" prop="name">
          <el-input v-model="department_form.name" autocomplete="off" style="width:60%" placeholder="请输入名称"></el-input>
        </el-form-item>
        <!--        <el-form-item label="类别：">-->
        <!--          <el-select v-model="department_form.category" placeholder="请选择">-->
        <!--            <el-option-->
        <!--              v-for="item in options"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value">-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="联系人：">
          <el-input v-model="department_form.contact_name" autocomplete="off" style="width:60%"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="department_form.contact_mobile" autocomplete="off" style="width:60%"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="add_department = false" class="ln-button" round>取 消</el-button>
        <el-button type="primary" @click="department_add" class="ln-button" round>确 定</el-button>
      </div>
    </el-dialog>
    <!--查看部门-->
    <el-dialog title="查看部门信息" :visible.sync="departmentView" width="30%">
      <el-form :model="departmentView_list" label-width="100px">
        <el-form-item label="部门名称：" prop="name">
          {{ departmentView_list.name }}
        </el-form-item>
        <el-form-item label="类别：">
          {{ departmentView_list.category }}
        </el-form-item>
        <el-form-item label="联系人：">
          {{ departmentView_list.contact_name }}
        </el-form-item>
        <el-form-item label="手机号：">
          {{ departmentView_list.contact_mobile }}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="departmentView = false" class="ln-button" round>关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "BuMenRenYuanGuanLi",
  data() {
    return {
      data: [],
      add_department: false,
      rules: {
        name: [{required: true, message: "请输入部门名称", trigger: 'change'}],
      },
      department_form: {
        name: '',
        category: 'moren',
        contact_name: '',
        contact_mobile: '',
      },
      departmentView: false,
      departmentView_list: {
        name: '',
        category: 'moren',
        contact_name: '',
        contact_mobile: '',
      },
    }
  },
  methods: {
    loadData() {
      // 加载数据列表及刷新
      this.$http.get("/department/").then((resp) => {
        this.data = resp.data;
      }).catch((err) => {
        this.$message.error({message: "数据获取失败！！", center: true})
      })
    },

    form_clean() {
      // 还原from表单
      this.department_form = {
        name: '',
        parent: '',
        category: 'moren',
        contact_name: '',
        contact_mobile: '',
      };
    },

    department_add() {
      // 新增顶级部门
      this.$refs.createForm.validate((valid) => {
        if (valid) {
          this.add_department = false;
          this.$http.post("/department/", this.department_form).then((resp) => {
            this.loadData();
            this.form_clean();
          }).catch((err) => {
            this.$message.error({message: "数据获取失败！！", center: true})
          })
        } else {
          this.$message.error('请填写完整信息后提交');
          return false
        }
      })
    },
    child_add_department(pk) {
      // 新增子部门
      this.$router.push({name: 'xinzengbumen', params: {pk: pk}});
    },

    update_department(data) {
      // 编辑部门
      this.$router.push({name: 'bianjibumen', params: {pk: data.pk}});
    },

    delete_department(data) {
      this.$confirm('此操作将永久删除  "' + data.name + '"  及所属部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete("/department/" + data.pk + "/").then((resp) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.loadData();
        }).catch((err) => {
          this.$message.error({message: "删除失败！！", center: true})
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    view_department(data) {
      this.departmentView = true;
      this.departmentView_list = {...data};
      // this.$router.push({name: 'chakanbumen', params: {pk: pk}});
    },

    user_list(data) {
      this.$router.push({name: 'renyuanguanli', params: {pk: data.pk}});
    },
    movenode(node, target, position, event) {
      let pos = "";
      switch (position) {
        case "before":
          pos = "left";
          break;
        case "after":
          pos = "right";
          break;
        case "inner":
          pos = "first-child";
          break;
      }
      let params = {
        department: node.data.pk,
        target: target.data.pk,
        position: pos,
      };
      this.$http.post("/departmentmove/", params).then((resp) => {
      });
    },
  },
  mounted() {
    this.loadData();
  }
}
</script>


<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
